<template>
	<view>
		<view class="info">
			<image :src="find.img"></image>
			<view>
				<view>{{find.storeName}}</view>
				<view>营业时间：{{find.starttimes}}-{{find.endtimes}}</view>
			</view>
		</view>

		<view class="nav">
			<view @tap="nav(1)">服务</view>
			<view @tap="nav(2)">评价</view>
			<view @tap="nav(3)">商家</view>
		</view>

		<template v-if="page==1">
			<view v-for="(pro,proid) in product" :key="proid">
				<view class="pro_list">
					<image :src="pro.img" @click="takEout(pro)"></image>
					<view style="width: 500upx;">
						<view>{{pro.serviceName}}</view>
						<view>{{pro.servicePrice}}</view>
						<view class="price">
							<view>¥{{pro.promotionPrice}}</view>
							<view class="his">¥{{pro.servicePrice}}</view>
							<view class="math">
								<view class="icon" @tap="sub(pro.serviceId,pro.num,pro.img,pro.serviceName,pro.promotionPrice)">-</view>
								<view>{{pro.num}}</view>
								<view class="icon y" @tap="add(pro.serviceId,pro.num,pro.img,pro.serviceName,pro.promotionPrice)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="pay">
				<view style="width:200upx;">联系商家</view>
				<view style="width:350upx;">
					<view class="pay_totals">¥{{totals}}</view>
					<view style="font-size:24upx;">预约时间：</view>
				</view>
				<view class="pay_btn" v-if="totals>0" @click="pay()">结算</view>
			</view>
			
		</template>
		
		<template v-if="page==2">
			<view v-for="(com,comid) in common" :key="comid">
				<view class="com_list">
					<view style="display:flex;">
						<image :src="com.user.headImg"></image>
						<view>{{com.user.name}}</view>
						</view>
					<view>{{com.createTime}}</view>
				</view>
				<view class="com_con">{{com.content}}</view>
				<image class="portra" :src="com.img" mode="aspectFill"></image>
				
			</view>
		</template>
		
		<template v-if="page==3">
			<view class="find_list">{{find.storeName}}</view>
			<view class="find_list">查看营业档</view>
			<view class="find_list">营业时间{{find.starttimes}}--{{find.endtimes}}</view>
			<view class="find_list">商家服务{{find.storeservice}}</view>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total:0,//
				product:[],//商家商品列表
				common:[],//评论列表
				find:{},//商家信息
				page:1,//切换页面
				totals:0,//总价
				//商家id存放
				ids:'',
				storeName:'',//商家名称
				num:'',//商品数量
				arrtotalPrice:[],//存放到总价的商品
				Takeleng:[],//选择了几份商品
				userid:'' ,//用户id
				Ordering:[],
				nameshop:''//商家信息
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.takeFun(e.id)
		},	
		methods: {
			takeFun(ids){
			let data = {
				id:ids,
				
			}
			console.log(data)
			let disdata = {
				storeId:ids
			}
			console.log(disdata)
			uni.request({
				url: this.baseurl+'sProduct/product',
				method: 'post',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data:disdata,
				success: res => {
					var list=res.data.data;
					console.log(list)
					list.forEach(item => {
						item.num = 0;
						item.total = 0;
					})
					this.product=list;
				}				
			});
			uni.request({
				url: this.baseurl+'sCommon/StoreCommon',
				method: 'post',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data:disdata,
				success: res => {
					this.common=res.data.data;
				}		
			});
			uni.request({
				url: this.baseurl+'sStore/find',
				method: 'post',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data:data,
				success: res => {
					this.find=res.data.data;
					this.storeName = this.find.storeName;
				}		
			});			
			},
			nav(e){
				this.page=e;
			},
			sub(e){
				var that=this;
				var arr=that.product;
				for(var i=0;i<arr.length;i++){
					if(arr[i].serviceId==e){
						if(arr[i].num>0){
							that.totals = that.totals - parseInt(arr[i].promotionPrice)					
							//that.totals -= arr[i].num*arr[i].promotionPrice
							arr[i].num--
						}
					}
				}
				
			},
			add(e){
				var that=this;
				var arr=that.product;
				console.log(arr)
				for(var i=0;i<arr.length;i++){
					if(arr[i].serviceId==e){
						arr[i].num++
						console.log(arr[i])
						// that.totals += arr[i].num*arr[i].promotionPrice
						that.totals = that.totals + parseInt(arr[i].promotionPrice)
						that.Takeleng.push(arr[i])
						that.Takeleng = [...new Set(that.Takeleng)]
						
						console.log(that.Takeleng)
						console.log(that.totals)
					}
				}
			},
			pay(){
				//需要登陆
				 if (this.$store.state.userInfo.id) {
					let totals = parseFloat((this.totals)).toFixed(1)
					let Ordering ={
						totals,//总金额
						userid:this.$store.state.userInfo.id,
						ids:this.ids,//商家id
						nameshop:this.find.storeName,
						allorder:this.Takeleng//选择了几份商品
					}		
					//console.log(Ordering)			
					let stroder = JSON.stringify(Ordering)
					console.log(stroder)	
					uni.navigateTo({			
						url:'/pages/order/createServiceOrder?ide='+ stroder
						
					});
				 } else {
				 	uni.navigateTo({
				 		url: '../public/login-name'
				 	});
				 }
			},	
			
			takEout(pro){
				console.log(pro)
				console.log('shagnid',this.ids)
				console.log('shagnname',this.storeName)
				uni.navigateTo({
					url:'../info/servicedetail?serviceId=' + pro.serviceId + '&ids=' +this.ids + '&storeName=' + this.storeName
				})
			}
		}
	}
</script>

<style>
.portra {
		margin:20upx;
		flex-shrink: 0;
		width: 120upx;
		height: 120upx;
	}
.info{width:750upx;height:160upx;display:flex;padding:30upx;font-size:34upx;line-height:70upx;background-color: #F0AD4E;}
.info image{width:200upx;height:120upx;margin-right:30upx;}
.nav{line-height:80upx;display:flex;font-size:34upx;margin-bottom:30upx;}
.nav view{width:150upx;text-align:center;}

.pro_list{display:flex;width:750upx;font-size:28upx;line-height:70upx;}
.pro_list image{width:200upx;height:180upx;margin:20upx;}
.price{display:flex;justify-content:space-between;color:red;}
.his{color:#999999;text-decoration:line-through;}
.math{display:flex;justify-content: space-around;width:200upx;line-height:50upx;padding-top:10upx;color:#333333;}
.icon{width: 44upx;height:44upx;border-radius:50%;text-align: center;line-height: 44upx;border:2upx solid #999999;color: #000000;}
.y{background-color: #F0AD4E;}

.pay{width:710upx;height:90upx;background-color:#999999;position:fixed;bottom:30upx;left:20upx;border-radius:30upx;color:#FFFFFF;display:flex;}
.pay_totals{font-size:34upx;line-height:50upx;}
.pay_btn{width:160upx;border-radius:0 30upx 30upx 0;text-align:center;line-height:90upx;font-size:28upx;color:#000000;background-color:#F0AD4E;}

.com_list{display: flex;justify-content:space-between;width:710upx;font-size:24upx;color:#333333;}
.com_list image{width:60upx;height:60upx;border-radius:50%;margin:0 20upx;}
.com_con{width:500upx;margin:20upx;font-size:24upx;}

.find_list{width:750upx;line-height:100upx;font-size:28upx;margin:20upx 0;text-indent:30upx;background-color:#F1F1F1;}
</style>
